import React, {useState} from 'react';
import {Link, Outlet, useNavigate} from "react-router-dom";

export default function Messages() {
    const [messages] = useState([
        {id: '001', title: '消息1', content: '锄禾日当午'},
        {id: '002', title: '消息2', content: '汗滴禾下土'},
        {id: '003', title: '消息3', content: '谁知盘中餐'},
        {id: '004', title: '消息4', content: '粒粒皆辛苦'}
    ])
    const navigate = useNavigate()

    function showDetail(item) {
        navigate('Detail', {
            replace: false,
            state: {
                ...item
            }
        })
    }

    return (
        <div>
            <ul>
                {
                    messages.map(item => {
                        return (
                            <li key={item.id}>
                                {/*state*/}
                                <Link to='Detail' state={
                                    {...item}
                                }>{item.title}</Link>&nbsp;&nbsp;
                                <button onClick={() => showDetail(item)}>展示详情</button>
                                {/*Search*/}
                                {/*<Link to={`Detail?id=${item.id}&title=${item.title}&content=${item.content}`}>{item.title}</Link>&nbsp;&nbsp;*/}
                                {/*params*/}
                                {/*<Link to={`Detail/${item.id}/${item.title}/${item.content}`}>{item.title}</Link>&nbsp;&nbsp;*/}
                            </li>
                        )
                    })
                }
            </ul>
            <hr/>
            <Outlet/>
        </div>
    )
}